<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>志愿者服务平台 - 登录</title>

    <!-- 引入 Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />

    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#40A9FF',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        };
    </script>

    <!-- 外部样式文件 -->
    <link rel="stylesheet" href="style.css" />
</head>
<body class="font-inter gradient-bg min-h-screen flex items-center justify-center p-4">
<!-- 背景装饰 -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-info/5 rounded-full blur-3xl"></div>
</div>

<!-- 登录卡片 -->
<div class="glass-effect rounded-2xl shadow-2xl w-full max-w-md p-8 relative z-10">
    <!-- Logo 和标题 -->
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-primary to-primary/80 rounded-2xl mb-4 shadow-lg">
            <i class="fa fa-heart text-white text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-gray-dark mb-2">志愿者服务平台</h1>
        <p class="text-gray-dark/70 text-sm">欢迎回来，请登录您的账户</p>
    </div>

    <!-- 登录表单 -->
    <form id="login-form" class="space-y-6">
        <!-- 用户名输入 -->
        <div>
            <label for="username" class="block text-sm font-semibold text-gray-dark mb-2">
                <i class="fa fa-user mr-2 text-primary"></i>用户名
            </label>
            <div class="relative">
                <input
                        type="text"
                        id="username"
                        name="username"
                        class="w-full border border-gray-medium/50 rounded-lg px-4 py-3 pl-12 bg-white/80 backdrop-blur-sm input-focus smooth-transition"
                        placeholder="请输入用户名"
                        required
                />
                <i class="fa fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-dark/50"></i>
            </div>
        </div>

        <!-- 密码输入 -->
        <div>
            <label for="password" class="block text-sm font-semibold text-gray-dark mb-2">
                <i class="fa fa-lock mr-2 text-primary"></i>密码
            </label>
            <div class="relative">
                <input
                        type="password"
                        id="password"
                        name="password"
                        class="w-full border border-gray-medium/50 rounded-lg px-4 py-3 pl-12 bg-white/80 backdrop-blur-sm input-focus smooth-transition"
                        placeholder="请输入密码"
                        required
                />
                <i class="fa fa-lock absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-dark/50"></i>
                <button
                        type="button"
                        id="toggle-password"
                        class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-dark/50 hover:text-primary smooth-transition"
                >
                    <i class="fa fa-eye" id="password-icon"></i>
                </button>
            </div>
        </div>

        <!-- 记住我 & 忘记密码 -->
        <div class="flex items-center justify-between">
            <label class="flex items-center">
                <input type="checkbox" id="remember" class="mr-2 text-primary w-4 h-4 rounded" />
                <span class="text-sm text-gray-dark">记住我</span>
            </label>
            <a href="#" class="text-sm text-primary hover:text-primary/80 smooth-transition">忘记密码？</a>
        </div>

        <!-- 登录按钮 -->
        <button
                type="submit"
                class="w-full bg-gradient-to-r from-primary to-primary/90 text-white py-3 rounded-lg font-semibold btn-effect shadow-lg hover:shadow-xl"
        >
            <i class="fa fa-sign-in mr-2"></i>登录
        </button>

        <!-- 分割线 -->
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-medium/30"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white/80 text-gray-dark/70">或者</span>
            </div>
        </div>

        <!-- 其他登录方式 -->
        <div class="grid grid-cols-2 gap-3">
            <button
                    type="button"
                    class="flex items-center justify-center px-4 py-2 border border-gray-medium/50 rounded-lg bg-white/80 hover:bg-gray-light/50 smooth-transition"
            >
                <i class="fa fa-wechat text-green-500 mr-2"></i>
                <span class="text-sm text-gray-dark">微信登录</span>
            </button>
            <button
                    type="button"
                    class="flex items-center justify-center px-4 py-2 border border-gray-medium/50 rounded-lg bg-white/80 hover:bg-gray-light/50 smooth-transition"
            >
                <i class="fa fa-qq text-blue-500 mr-2"></i>
                <span class="text-sm text-gray-dark">QQ登录</span>
            </button>
        </div>
    </form>

    <!-- 注册链接 -->
    <div class="text-center mt-6">
        <p class="text-sm text-gray-dark/70">
            还没有账户？
            <a href="#" class="text-primary hover:text-primary/80 font-semibold smooth-transition">立即注册</a>
        </p>
    </div>

    <!-- 底部信息 -->
    <div class="text-center mt-8 pt-6 border-t border-gray-light/30">
        <p class="text-xs text-gray-dark/50">© 2024 志愿者服务平台. 保留所有权利.</p>
    </div>
</div>

<!-- 加载动画 -->
<div id="loading" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 shadow-xl">
        <div class="flex items-center space-x-3">
            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
            <span class="text-gray-dark">登录中...</span>
        </div>
    </div>
</div>

<!-- 外部脚本文件 -->
<script src="script.js"></script>
</body>
</html>
